<article class="component" id="list" data-url='list'>
  <h2 class="component-title">列表</h2>
  <p class="component-description">常在iOS应用中看到的列表，是种多功能且强大的交互组件。列表将数据展现在一个可滚动的多行的列表中，可以将数据划分成不同的片段/组（sections/groups）。</p>
  <p class="component-description">列表有以下用途：</p>
  <ul>
    <li>让用户可以浏览结构化的多级数据</li>
    <li>展现一个索引列表</li>
    <li>在可视化的不同分组中，显示详细信息和控件</li>
    <li>展现一个可以选择的列表</li>
  </ul>

{% highlight html %}
<header class="bar bar-nav">
  <h1 class="title">视图列表</h1>
</header>
<div class="content">
  <div class="content-block-title">图标、标题和副标题</div>
  <div class="list-block">
    <ul>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">商品名称</div>
          <div class="item-after">杜蕾斯</div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">型号</div>
          <div class="item-after">极致超薄型</div>
        </div>
      </li>
    </ul>
  </div>
  <div class="content-block-title">标题和副标题</div>
  <div class="list-block">
    <ul>
      <li class="item-content">
        <div class="item-inner">
          <div class="item-title">商品名称</div>
          <div class="item-after">杜蕾斯</div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-inner">
          <div class="item-title">型号</div>
          <div class="item-after">极致超薄型</div>
        </div>
      </li>
    </ul>
  </div>
  <div class="content-block-title">带箭头</div>
  <div class="list-block">
    <ul>
      <li class="item-content item-link">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">商品名称</div>
          <div class="item-after">杜蕾斯</div>
        </div>
      </li>
      <li class="item-content item-link">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">型号</div>
          <div class="item-after">极致超薄型</div>
        </div>
      </li>
    </ul>
  </div>
</div>
{% endhighlight %}

  <p class="component-description">其中：</p>
  <ul>
    <li><code>item-content</code> - <code>item-media</code>和<code>item-inner</code>的主要弹性(flex)容器。<strong>必选</strong>元素。</li>
    <li><code>item-media</code> - 媒体元素（如图标，图片等）的容器。<strong>可选</strong>元素。</li>
    <li><code>item-inner</code> - <code>item-title</code>和<code>item-after</code>的主要弹性(flex)容器。<strong>必选</strong>元素。</li>
    <li><code>item-title</code> - 单行列表项目标题。<strong>必选</strong>元素。</li>
    <li><code>item-after</code> - 列表项目标签。可以包含任意额外的html元素（例如标签文本、徽章、switch/toggle、按钮等等）。<strong>可选</strong>元素。</li>
  </ul>

  <p>在 <code>.item-content</code> 上加上 <code>.item-link</code> 会增加一个向右的箭头。</p>

</article>

<article class="component active">
  <h3 class="component-title">联系人列表（Contacts List）</h3>
  <p class="component-description">联系人列表用来展示个人的联系方式。</p>
  <p>联系人列表是<a href="#list">分组列表（Grouped Lists）</a>的一个特殊的类型，主要有2点不同：</p>
  <ul>
    <li>列表区域元素（“list-block”）需要带上额外的“contacts-block”类</li>
  </ul>

  <div class="component-example component-example-fullbleed">
  </div>

{% highlight html %}
<header class="bar bar-nav">
  <h1 class="title">联系人列表</h1>
</header>
<div class="content">
  <div class="list-block contacts-block">
    <div class="list-group">
      <ul>
        <li class="list-group-title">A</li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题1</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题2</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题3</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题4</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题5</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题6</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题7</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题8</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-group">
      <ul>
        <li class="list-group-title">B</li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题1</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题2</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题3</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题4</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题5</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题6</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-group">
      <ul>
        <li class="list-group-title">C</li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题1</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题2</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题3</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题4</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题5</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题6</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题7</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-group">
      <ul>
        <li class="list-group-title">V</li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题1</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
{% endhighlight %}

</article>

<article class="component active">
  <h3 class="component-title">多媒体列表（Media List View）</h3>
  <p class="component-description">多媒体列表是<a href="#list">列表（list view）</a>的扩展，它是为了展示更复杂的数据比如产品，服务，用户等等。</p>
  <p class="component-description">当然，它的布局更为复杂：</p>

  <div class="component-example component-example-fullbleed">
  </div>

{% highlight html %}
<header class="bar bar-nav">
  <h1 class="title">多媒体列表</h1>
</header>
<div class="content">
  <div class="content-block-title">曲目</div>
  <div class="list-block media-list">
    <ul>
      <li>
        <a href="#" class="item-link item-content">
          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 4rem;'></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">标题</div>
              <div class="item-after">$15</div>
            </div>
            <div class="item-subtitle">标题</div>
            <div class="item-text">此处是文本内容...</div>
          </div>
        </a>
      </li>
    </ul>
  </div>
  <div class="content-block-title">邮件应用</div>
  <div class="list-block media-list">
    <ul>
      <li>
        <a href="#" class="item-link item-content">
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Facebook</div>
              <div class="item-after">17:14</div>
            </div>
            <div class="item-subtitle">子标题</div>
            <div class="item-text">此处是文本内容...</div>
          </div>
        </a>
      </li>
    </ul>
  </div>
  <div class="content-block-title">简单列表</div>
  <div class="list-block media-list">
    <ul>
      <li>
        <div class="item-content">
          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">标题</div>
            </div>
            <div class="item-subtitle">子标题</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="content-block-title">嵌入式</div>
  <div class="list-block media-list inset">
    <ul>
      <li>
        <a href="#" class="item-link item-content">
          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">标题</div>
            </div>
            <div class="item-subtitle">子标题</div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</div>
{% endhighlight %}

  <p class="component-description">其中：</p>
  <ul>
    <li><code>item-media</code>和<code>item-inner</code>的主要弹性(flex)容器。<strong>必选</strong>元素。</li>
    <li><code>item-media</code> - 媒体元素（如图标，图片等）的容器. <strong>可选</strong>元素。</li>
    <li><code>item-inner</code> - <code>item-title</code>和<code>item-after</code>的主要弹性(flex)容器。<strong>必选</strong>元素。</li>
    <li><code>item-title-row</code> - <code>item-title</code> 和 <code>item-after</code>的主要弹性(flex)容器。<strong>必选</strong>元素。</li>
    <li><code>item-title</code> - 单行列表项目标题。<strong>可选</strong>元素。</li>
    <li><code>item-after</code> - 列表项目标签。可以包含任意额外的html元素（例如标签文本、徽章、switch/toggle、按钮等等）。<strong>可选</strong>元素。</li>
    <li><code>item-subtitle</code> - 额外的单行标题。<strong>可选</strong>元素。</li>
    <li><code>item-text</code> - 额外的两行布局的容器，用来放置细节描述。<strong>可选</strong>元素。</li>
  </ul>

</article>

<article class="component active" id='check-list' data-url='check-list'>
  <h3 class="component-title">可选择列表</h3>
  <p class="component-description">列表可以支持单选和多选，我们只是修改了 <code>checkbox</code> 和 <code>radio</code> 的样式，并没有进行任何JS操作。所以如果取数据，需要从其中隐藏的 <code>input</code> 元素中取，和原生的表单用法完全一样。</p>

  <p>列表是单选还是多选，完全取决于 <code>input</code> 的 <code>type</code> 属性设置。目前我们对单选和多选的图标样式是没有做区分的，后续可能会设置不同的样式以区分单选和多选。</p>

{% highlight html %}
<ul>
  <li>
    <label class="label-checkbox item-content">
      <input type="radio" name="my-radio">
      <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
      <div class="item-inner">
        <div class="item-title-row">
          <div class="item-title">石头</div>
          <div class="item-after">17:14</div>
        </div>
        <div class="item-subtitle">New messages from John Doe</div>
        <div class="item-text">Lorem ipsum dolor sit amet...</div>
      </div>
    </label>
  </li>
  <li>
    <label class="label-checkbox item-content">
      <input type="radio" name="my-radio">
      <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
      <div class="item-inner">
        <div class="item-title-row">
          <div class="item-title">剪刀</div>
          <div class="item-after">17:14</div>
        </div>
        <div class="item-subtitle">New messages from John Doe</div>
        <div class="item-text">Lorem ipsum dolor sit amet...</div>
      </div>
    </label>
  </li>
</ul>
{% endhighlight %}

  <p>因为选择操作是由原生的 <code>input</code> 实现的，所以只需要把上面的代码中的 input 元素的 <code>type="radio"</code> 改成 <code>type="checkbox"</code> 就可以变成多选。</p>

</article>
